<template>
	<u-navbar :placeholder="true" bg-color="#fff" leftText="" title="" auto-back>
		<template #center>
			<view style="font-weight: 900; margin: 60rpx 0">
				查看简历
			</view>
		</template>
	</u-navbar>
	<view>
		<view class="auto head">
			<view class="headimg">
				<image :src="state.personInfo.headImage" class="titleImg" mode=""></image>
			</view>
			<view class="headcen">
				<view class="username">
					{{state.personInfo.realName}}
				</view>
				<view class="background">
					{{getWork(state.personInfo.workExperienceTime)}}·{{state.personInfo.age}}岁·{{getEdu(state.personInfo.education)}}
				</view>
				<view class="lianxi">
					<view class="lianxiWay">
						<view><img style="width: 18px;height: 18px;" src="@/static/icon/phone.png" alt=""></view>
						<text>{{state.personInfo.phone}}</text>
					</view>
					<view class="lianxiWay">
						<view><img style="width: 18px;height: 18px;" src="@/static/icon/wechat2.png" alt=""></view>
						<text>{{state.personInfo.wechatNumber}}</text>
					</view>
					
				</view>
				
			</view>
			<view class="headRight"  >
				<view class="headRight-top">
					<text>在线简历</text>
					<!-- <image src="@/static/icon/edit.png" class="headRightimg" mode=""></image> -->
				</view>
				<!-- <u-tag class="toTopBtn" text="置顶" plain size="mini" type="warning" @click="toVip"></u-tag> -->
					
				
				
			</view>
		</view>
		<view class="main auto">
			<view class="mainModal">
				<view class="mainModalHead" >
					<view class="mainTitle">
						求职意向
					</view>
					<!-- <view class="icon">
						<u-icon name="arrow-right"></u-icon>
					</view> -->
				</view>
				
				<view class="mainRemark">{{state.personInfo.position}}</view>
				<text class="mainRemark" v-if="state.personInfo.comprehensiveSalaryType == 1">{{state.personInfo.comprehensiveSalaryStart}}-{{state.personInfo.comprehensiveSalaryEnd}}/月</text>
				<text class="mainRemark" v-else>面议</text>
				&nbsp;&nbsp;&nbsp;&nbsp;<text>{{state.personInfo.cityName}}</text>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						个人优势
					</view>
					<!-- <view class="icon">
						<u-icon name="arrow-right"></u-icon>
					</view> -->
				</view>
				<u-parse :content="state.personInfo.personalAdvantages" v-if="state.personInfo.personalAdvantages"></u-parse>
				
				<view class="mainRemark textGray" v-else>填写个人优势，增加岗位竞争力</view>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						工作经历
					</view>
					<!-- <view class="icon">
						<u-icon name="plus-circle"></u-icon>
					</view> -->
				</view>
				<view class="" v-if="state.personInfo.workList && state.personInfo.workList.length>0">
					<view class="" v-for="item in state.personInfo.workList" :key="item.id">
						<view class="">{{item.name}}</view>
						<view class="">{{item.position}}</view>
						<view class="">{{item.remark}}</view>
					</view>
				</view>
				<view class="mainRemark textGray" v-else>{{state.personInfo.personalAdvantages || '通过工作经历展现你的经验和技能，让招聘方更想进一步了解你'}}</view>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						教育经历
					</view>
					<!-- <view class="icon">
						<u-icon name="plus-circle"></u-icon>
					</view> -->
				</view>
				
				<view class="" v-if="state.personInfo.schoolList && state.personInfo.schoolList.length>0">
					<view class="" v-for="item in state.personInfo.schoolList" :key="item.id">
						<view class="">{{item.name}}</view>
						<view class="">{{item.position}}</view>
						<view class="">{{item.remark}}</view>
					</view>
				</view>
				
				<view class="mainRemark textGray" v-else>投递对学历有要求的职位，添加教育经历很有必要</view>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						作品图片
					</view>
					<!-- <view class="icon">
						<u-icon name="plus-circle"></u-icon>
					</view> -->
				</view>
				<view class="imgBox" v-if="state.personInfo.workPictureArr && state.personInfo.workPictureArr.length>0">
					<image v-for="(item,idx) in state.personInfo.workPictureArr" :src="item" :key="idx" class="itemImg" @click="clickImg(item,state.personInfo.workPictureArr)"></image>
				</view>
				<view class="mainRemark textGray" v-else>求职美容美甲等职位，建议添加作品图片，更易获得面试机会</view>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						资格证书
					</view>
					<!-- <view class="icon">
						<u-icon name="plus-circle"></u-icon>
					</view> -->
				</view>
				<view class="imgBox" v-if="state.personInfo.credentialsArr && state.personInfo.credentialsArr.length>0">
					<image v-for="(item,idx) in state.personInfo.credentialsArr" :src="item" :key="idx" class="itemImg" @click="clickImg(item,state.personInfo.credentialsArr)"></image>
				</view>
					
				<view class="mainRemark textGray" v-else>你有那些资格证书？招聘方很看重哦</view>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						自我评价
					</view>
					<!-- <view class="icon">
						<u-icon name="arrow-right"></u-icon>
					</view> -->
				</view>
				<u-parse :content="state.personInfo.info" v-if="state.personInfo.info"></u-parse>
				<view class="mainRemark textGray" v-else>介绍一下自己吧</view>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						专业技能
					</view>
					<!-- <view class="icon">
						<u-icon name="plus-circle"></u-icon>
					</view> -->
				</view>
				<u-parse :content="state.personInfo.skills" v-if="state.personInfo.skills"></u-parse>
				<view class="mainRemark" v-else>请填写专业技能</view>
			</view>
			<view class="mainModal">
				<view class="mainModalHead">
					<view class="mainTitle">
						项目经历
					</view>
					<!-- <view class="icon">
						<u-icon name="plus-circle"></u-icon>
					</view> -->
				</view>
				<view class="" v-if="state.personInfo.projectList && state.personInfo.projectList.length>0">
					<view class="" v-for="item in state.personInfo.projectList" :key="item.id">
						<view class="">{{item.name}}</view>
						<view class="">{{item.position}}</view>
						<view class="">{{item.remark}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref,reactive,getCurrentInstance} from "vue";
	import {useRouter} from 'uni-mini-router'
	import {
		onShow,
		onLoad 
	} from '@dcloudio/uni-app'
	import {getEdu,getWork} from '@/utlis/common.js'
	const {proxy} = getCurrentInstance()
	let router = useRouter()
	const routerLink = (e) => {
		console.log(e)
		router.push({
			name: e,
			params: {
				
			}
		})
	}
	
	const state = reactive({
		personInfo:{}
	})
	const clickImg = (item,arr)=>{
		uni.previewImage({
			urls: arr, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: item, // 当前显示图片的http链接，默认是第一个
			success: function(res) {},
			fail: function(res) {},
			complete: function(res) {},
		})
	}
	// 获取个人简历详情
	// const meiyeRecruitHunterInfo2DetailsFun = ()=>{
	// 	//获取详情
	// 	proxy.$req('GET', proxy.$api.meiyeRecruitHunterInfo2Details).then((res) => {
	// 		if(res.code === 200){
	// 			if(res.result.workPicture){
	// 				res.result.workPictureArr = res.result.workPicture.split(',')
	// 			}else{
	// 				res.result.workPictureArr = []
	// 			}
				
	// 			if(res.result.credentials){
	// 				res.result.credentialsArr = res.result.credentials.split(',')
	// 			}else{
	// 				res.result.credentialsArr = []
	// 			}
				
				
	// 			state.personInfo = res.result
				
	// 		}
	// 	})
	// }
	onLoad((options) => {
		if (options.content) {
			state.personInfo = JSON.parse(options.content);
		}
		console.log(options);
	});
	onShow(()=>{
		meiyeRecruitHunterInfo2DetailsFun()
	})
	
	const toVip = ()=>{
		router.push({
			name: 'vipbackup',
			params: {
				vipTime:state.personInfo.vipTime,
				isVip:state.personInfo.isVip,
				payAmount:state.personInfo.payAmount,
			}
		})
	}
	
	
</script>
<style lang="scss">
	page{
		background-color: #FAFAFA;
	}
	.auto{
		width: 680rpx;
		margin: 0 auto;		
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.04);
		background-color: #FFFFFF;
	}
	.head{
		margin-bottom: 35rpx;
		height: 214rpx;
		display: flex;
		margin-top: 50rpx;
		justify-content: space-between;
		.headRight{
			font-size: 26rpx;
			display: flex;
			padding: 10rpx 0;
			box-sizing: border-box;
			flex-direction: column;
			justify-content: space-between;
			
			
			.headRightimg{
				width: 34rpx;
				height: 34rpx;
			}
			.headRight-top{
				margin-bottom: 20rpx;
			}
			.toTopBtn{
				display:flex;
				align-items: center;
				width:140rpx;
			}
		}
		.headcen>view{
			margin-bottom: 20rpx;
		}
		.headcen{
			padding-left: 3rpx;
			width: 320rpx;
			
			.background{
				font-size: 24rpx;
			}
			.lianxi{
				font-size: 24rpx;
			}
		}
		.headimg{
			padding: 23rpx 0;
		}
		.username{
			font-weight: 600;
			font-size: 40rpx;
		}
		.titleImg{
			border-radius: 50%;
			width: 112rpx;
			height: 112rpx;
			
		}
		.lianxi{
			display: flex;
			.lianxiWay{
				display: flex;
				margin-right: 15rpx;
			}
		}
	}
	.main{
		.mainModal{
			padding: 30rpx 0;
			border-bottom: 1rpx solid rgba(0,0,0,0.05);
			.mainTitle{
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
				margin-bottom: 20rpx;
			}
			.mainModalHead{
				padding: 10rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				.icon{
					padding: 12rpx 0;
				}
			}
			.mainRemark{
				margin: 10rpx 0;
			}
			.textGray{
				font-weight: 400;
				color: rgba(0,0,0,0.25);
			}
			.imgBox{
				display:flex;
				flex-wrap: wrap;
				
				.itemImg{
					width:160rpx;
					height:160rpx;
					margin-right:20rpx;
				}
				
			}
		}
	}
	
</style>
